<template>
  <div style="margin-bottom: 50px">
    <van-skeleton title :row="15" :loading="loading.isFirst">
      <div class="VOrderContainer">
        <van-tabs
          color="red"
          class="VOrderIndex"
          v-model:active="active"
          @change="methods.onClickTab"
        >
          <!-- 新订单新订单  start-->
          <van-pull-refresh
            v-model="loadx.loadinga"
            @refresh="methods.onRefresha()"
          >
            <van-tab title="新订单" name="0">
              <div v-if="order_new?.data?.length === 0">
                <van-empty description="暂无数据" />
              </div>

              <div class="finishOrders" v-if="order_new?.data?.length !== 0">
                <div
                  class="finishOrder"
                  v-for="item in order_new?.data"
                  :key="item.id"
                >
                  <!-- 父循环体开始  数量只有一个的情况下-->
                  <div v-if="item?.details?.length === 1">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>
                      <!-- <p><van-tag type="warning">未发货</van-tag></p> -->
                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子循环体开始start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <img :src="d.photo" alt="" class="shop-img" />

                        <div class="shop-data">
                          <div>{{ d.name }}</div>
                          <div>{{ d.specs }}</div>
                          <div>￥ {{ d.price }}</div>
                          <div>×{{ d.number }}</div>
                          <div
                            class="iconfont icon-jiedan"
                            v-if="item.isCancel === 0"
                            style="
                              font-size: 2.5rem !important;
                              color: rgb(232, 179, 93);
                            "
                          ></div>

                          <div
                            v-if="item.isCancel === 1"
                            class="iconfont icon-yiquxiao"
                            style="font-size: 2.5rem !important"
                          ></div>

                          <div class="shop-date">
                            <div>
                              生产日期: {{ d.birthday }} 保质期:
                              {{ d.expiryday }}天
                            </div>
                          </div>
                        </div>

                        <div class="shop-price">
                          <div>
                            <span class="red">￥ {{ d.money }}元</span>
                          </div>
                          <div>
                            总计:
                            <span class="weight red">￥ {{ item.money }}</span
                            >元
                          </div>
                        </div>
                      </div>

                      <!-- 子循环体end -->

                      <div class="shopDetail_btn">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <van-button
                            size="small"
                            color="red"
                            class=""
                            v-if="item.isCancel === 0"
                            @click="methods.MerchantCancelOrder(item)"
                            >取消订单</van-button
                          >

                          <van-tag v-if="item.isCancel === 1">已取消</van-tag>

                          <!-- <van-button
                          size="small"
                          class="green-btn"
                          @click="methods.supplierAcceptOrder(item)"
                          >确认接单</van-button
                        > -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 父循环体结束 -->

                  <!-- 父循环体开始  数量多个的情况下-->
                  <div v-if="item?.details?.length >= 2">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>
                      <!-- <p><van-tag type="warning">未发货</van-tag></p> -->
                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子循环体开始start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <!-- 1 -->
                        <div v-if="i === 0">
                          <img :src="d.photo" alt="" class="shop-img" />

                          <div class="shop-data">
                            <div>{{ d.name }}</div>
                            <div>{{ d.specs }}</div>
                            <div>￥ {{ d.price }}</div>
                            <div>×{{ d.number }}</div>
                            <div
                              class="iconfont icon-jiedan"
                              v-if="item.isCancel === 0"
                              style="
                                font-size: 2.5rem !important;
                                color: rgb(232, 179, 93);
                              "
                            ></div>

                            <div
                              v-if="item.isCancel === 1"
                              class="iconfont icon-yiquxiao"
                              style="font-size: 2.5rem !important"
                            ></div>
                            <div class="shop-date">
                              <div>
                                生产日期: {{ d.birthday }} 保质期:
                                {{ d.expiryday }}天
                              </div>
                            </div>
                          </div>

                          <div class="shop-price">
                            <div>
                              <span class="red">￥ {{ d.money }}元</span>
                            </div>
                            <!-- <div>
                    总计: <span class="weight red">￥ {{ item.money }}</span
                    >元
                  </div> -->
                          </div>
                        </div>
                        <!-- 1 -->

                        <!-- 2 -->
                        <div v-if="i !== 0">
                          <div v-if="i >= 0 && i < 2">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div>{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>
                                    生产日期: {{ d.birthday }} 保质期:
                                    {{ d.expiryday }}天
                                  </div>
                                </div>
                              </div>

                              <div class="shop-price">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                                <div
                                  v-if="
                                    i === item.details.length - 1 ||
                                    item?.details[2]?.display === 'none'
                                  "
                                >
                                  总计:
                                  <span class="weight red"
                                    >￥ {{ item.money }}</span
                                  >元
                                </div>
                              </div>
                            </div>
                            <div
                              style="text-align: center"
                              v-if="
                                item.details.length - 2 >= 0 &&
                                item?.details[2]?.display === 'none'
                              "
                            >
                              <p>
                                <span
                                  class="weight"
                                  style="font-size: 12px"
                                  @click="methods.lookMores(item, 'block')"
                                  >查看更多</span
                                >
                                <span class="hui" style="font-size: 10px"
                                  >(其余{{
                                    item.details.length - 2
                                  }}件商品)</span
                                >
                              </p>
                            </div>
                          </div>

                          <div v-if="i >= 2" :style="{ display: d.display }">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div>{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>
                                    生产日期: {{ d.birthday }} 保质期:
                                    {{ d.expiryday }}天
                                  </div>
                                </div>
                              </div>

                              <div class="shop-price">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                                <div v-if="i === item.details.length - 1">
                                  总计:
                                  <span class="weight red"
                                    >￥ {{ item.money }}</span
                                  >元
                                </div>
                              </div>
                            </div>
                          </div>

                          <div
                            v-if="
                              i === item.details.length - 1 &&
                              item.details.length > 2
                            "
                          >
                            <div
                              style="text-align: center"
                              v-if="
                                item.details.length - 2 >= 0 &&
                                item?.details[item.details.length - 1]
                                  ?.display === 'block'
                              "
                            >
                              <p>
                                <span
                                  class="weight"
                                  style="font-size: 12px"
                                  @click="methods.lookMores(item, 'none')"
                                  >收起
                                </span>
                              </p>
                            </div>
                          </div>
                        </div>

                        <!-- 2 -->
                      </div>

                      <!-- 子循环体end -->

                      <div class="shopDetail_btn">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <van-button
                            size="small"
                            color="red"
                            class=""
                            v-if="item.isCancel === 0"
                            @click="methods.MerchantCancelOrder(item)"
                            >取消订单</van-button
                          >

                          <van-tag v-if="item.isCancel === 1">已取消</van-tag>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 父循环体结束 多个情况-->
                </div>
              </div>

              <van-list
                v-model:loading="loads.loadinga"
                :finished="loads.finisheda"
                finished-text="没有更多了"
                @load="methods.onLoada()"
              >
              </van-list>
            </van-tab>
          </van-pull-refresh>
          <!-- 新订单  end-->

          <!-- 进行中订单  start-->
          <van-pull-refresh
            v-model="loadx.loadingb"
            @refresh="methods.onRefreshb()"
          >
            <van-tab title="进行中" name="1">
              <div v-if="order_have?.data?.length === 0">
                <van-empty description="暂无数据" />
              </div>
              <div class="finishOrders" v-if="order_have?.data.length !== 0">
                <div
                  class="finishOrder"
                  v-for="item in order_have?.data"
                  :key="item.id"
                >
                  <!-- 父循环体开始  数量只有一个的情况下-->
                  <div v-if="item?.details?.length === 1">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>

                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子 start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <img :src="d.photo" alt="" class="shop-img" />

                        <div class="shop-data">
                          <div class="weight">{{ d.name }}</div>
                          <div>{{ d.specs }}</div>
                          <div>￥ {{ d.price }}</div>
                          <div>×{{ d.number }}</div>
                          <div
                            class="iconfont icon-weifahuo"
                            v-if="d.isSend === 0 && item.isCancel === 0"
                            style="font-size: 2.5rem !important; color: #ffa605"
                          ></div>
                          <div
                            v-if="d.isSend === 0 && item.isCancel === 1"
                            class="iconfont icon-yiquxiao"
                            style="font-size: 2.5rem !important"
                          ></div>
                          <div
                            class="iconfont icon-yifahuo"
                            v-if="d.isSend === 1 && d.isReceive === 0"
                            style="font-size: 2.5rem !important; color: #91d2ec"
                          ></div>
                          <div
                            class="iconfont icon-daiqueren"
                            v-if="d.isSend === 1 && d.isReceive === 1"
                            style="
                              font-size: 2.5rem !important;
                              color: rgb(255, 0, 0);
                            "
                          ></div>

                          <div class="shop-date">
                            <div>保质期至: {{ d.expirydayDate }}</div>
                            <!-- <div  style="padding-left: 100px;">实收: ￥30 元</div> -->
                          </div>
                        </div>

                        <div class="shop-price shop-price_b">
                          <div>
                            <span class="red">￥ {{ d.money }}元</span>
                          </div>
                          <div>
                            <span class="weight red"
                              >实收: {{ d.receiveMoney }}元</span
                            >
                          </div>
                        </div>

                        <div
                          v-if="i === item.details.length - 1"
                          style="text-align: end; font-size: 13px"
                        >
                          <span
                            >应收:
                            <span
                              style="text-decoration: line-through"
                              class="red weight"
                              >￥{{ item.money }}</span
                            >元，实收:
                            <span class="weight red"
                              >￥ {{ item.receiveMoney }}</span
                            >
                            元
                          </span>
                        </div>
                      </div>
                      <!-- 子 end -->

                      <!-- <div class="shopDetail_btn">
                  <div style="font-size: 10px" class="hui mtw">
                    {{item.time}}-下单
                  </div>

                  <div class="right-bottom">
                    <van-button size="small" class="green-btn mrs"
                      >发货</van-button
                    >

                    <van-button size="small" color="red">取消</van-button>
                  </div>
                </div> -->

                      <div class="shopDetail_btn" v-if="item?.isSend === 0">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <!-- <van-button
                          size="small"
                          class="green-btn mrs"
                          @click="methods.supplierSend(item, 1)"
                          >发货</van-button
                        > -->
                          <!-- 未发货即为供应商接单，还未发货的订单 -->
                          <van-button
                            size="small"
                            color="red"
                            v-if="item.isSend === 0 && item.isCancel === 0"
                            @click="methods.MerchantCancelOrder(item)"
                            >取消订单</van-button
                          >

                          <van-tag
                            v-if="item.isSend === 0 && item.isCancel === 1"
                            >已取消</van-tag
                          >
                        </div>
                      </div>

                      <div class="shopDetail_btn" v-if="item?.isSend === 1">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <van-tag
                            v-if="item?.isReceive === 1"
                            class="mrs mts"
                            type="warning"
                            style="position: relative; top: 5px"
                            >待供应商收货</van-tag
                          >

                          <van-button
                            size="small"
                            v-if="item?.isReceive === 0"
                            class="green-btn"
                            @click="methods.goReceive(item)"
                            >收货</van-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 父循环体结束  数量只有一个的情况下 -->

                  <!-- 父循环体结束  数量多个的情况下 -->
                  <div v-if="item?.details?.length >= 2">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>
                      <!-- <p><van-tag type="warning">未发货</van-tag></p> -->
                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子循环体开始start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <!-- 1 -->
                        <div v-if="i === 0">
                          <img :src="d.photo" alt="" class="shop-img" />

                          <div class="shop-data">
                            <div class="weight">{{ d.name }}</div>
                            <div>{{ d.specs }}</div>
                            <div>￥ {{ d.price }}</div>
                            <div>×{{ d.number }}</div>
                            <!-- <div
                            class="iconfont icon-weifahuo"
                            v-if="d.isSend === 0"
                            style="font-size: 2.5rem !important; color: #ffa605"
                          ></div>
                          <div
                            class="iconfont icon-yifahuo"
                            v-if="d.isSend === 1 && d.isReceive === 0"
                            style="font-size: 2.5rem !important; color: #91d2ec"
                          ></div>

                          <div
                            class="iconfont icon-daiqueren"
                            v-if="d.isSend === 1 && d.isReceive === 1"
                            style="
                              font-size: 2.5rem !important;
                              color: rgb(255, 0, 0);
                            "
                          ></div> -->
                            <div
                              class="iconfont icon-weifahuo"
                              v-if="d.isSend === 0 && item.isCancel === 0"
                              style="
                                font-size: 2.5rem !important;
                                color: #ffa605;
                              "
                            ></div>
                            <div
                              v-if="d.isSend === 0 && item.isCancel === 1"
                              class="iconfont icon-yiquxiao"
                              style="font-size: 2.5rem !important"
                            ></div>
                            <div
                              class="iconfont icon-yifahuo"
                              v-if="d.isSend === 1 && d.isReceive === 0"
                              style="
                                font-size: 2.5rem !important;
                                color: #91d2ec;
                              "
                            ></div>
                            <div
                              class="iconfont icon-daiqueren"
                              v-if="d.isSend === 1 && d.isReceive === 1"
                              style="
                                font-size: 2.5rem !important;
                                color: rgb(255, 0, 0);
                              "
                            ></div>

                            <div class="shop-date">
                              <div>保质期至: {{ d.expirydayDate }}</div>
                            </div>
                          </div>

                          <div class="shop-price shop-price_b">
                            <div>
                              <span class="red">￥ {{ d.money }}元</span>
                            </div>
                            <div>
                              <span class="weight red"
                                >实收: {{ d.receiveMoney }}元</span
                              >
                            </div>
                          </div>
                        </div>
                        <!-- 1 -->

                        <!-- 2 -->
                        <div v-if="i !== 0">
                          <div v-if="i >= 0 && i < 2">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div class="weight">{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>保质期至: {{ d.expirydayDate }}</div>
                                </div>
                              </div>

                              <div class="shop-price shop-price_b">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                                <div>
                                  <span class="weight red"
                                    >实收: {{ d.receiveMoney }}元</span
                                  >
                                </div>
                              </div>
                              <!-- (i === i) -->
                              <div
                                v-if="
                                  i === item.details.length - 1 ||
                                  item?.details[2]?.display === 'none'
                                "
                                style="text-align: end; font-size: 13px"
                              >
                                <span
                                  >应收:
                                  <span
                                    style="text-decoration: line-through"
                                    class="red weight"
                                    >￥{{ item.money }}</span
                                  >元，实收:
                                  <span class="weight red"
                                    >￥ {{ item.receiveMoney }}</span
                                  >
                                  元
                                </span>
                              </div>
                            </div>
                            <div
                              style="text-align: center"
                              v-if="
                                item.details.length - 2 >= 0 &&
                                item?.details[2]?.display === 'none'
                              "
                            >
                              <p>
                                <span
                                  class="weight"
                                  style="font-size: 12px"
                                  @click="methods.lookMores(item, 'block')"
                                  >查看更多</span
                                >
                                <span class="hui" style="font-size: 10px"
                                  >(其余{{
                                    item.details.length - 2
                                  }}件商品)</span
                                >
                              </p>
                            </div>
                          </div>

                          <div v-if="i >= 2" :style="{ display: d.display }">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div class="weight">{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>保质期至: {{ d.expirydayDate }}</div>
                                </div>
                              </div>

                              <div class="shop-price shop-price_b">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                                <div>
                                  <span class="weight red"
                                    >实收: {{ d.receiveMoney }}元</span
                                  >
                                </div>
                              </div>

                              <div
                                v-if="i === item.details.length - 1"
                                style="text-align: end; font-size: 13px"
                              >
                                <span
                                  >应收:
                                  <span
                                    style="text-decoration: line-through"
                                    class="red weight"
                                    >￥{{ item.money }}</span
                                  >元，实收:
                                  <span class="weight red"
                                    >￥ {{ item.receiveMoney }}</span
                                  >
                                  元
                                </span>
                              </div>
                            </div>

                            <div
                              v-if="
                                i === item.details.length - 1 &&
                                item.details.length > 2
                              "
                            >
                              <div
                                style="text-align: center"
                                v-if="
                                  item.details.length - 2 >= 0 &&
                                  item?.details[item.details.length - 1]
                                    ?.display === 'block'
                                "
                              >
                                <p>
                                  <span
                                    class="weight"
                                    style="font-size: 12px"
                                    @click="methods.lookMores(item, 'none')"
                                    >收起
                                  </span>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>

                        <!-- 2 -->
                      </div>

                      <!-- 子循环体end -->

                      <div class="shopDetail_btn" v-if="item?.isSend === 0">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <!-- <van-button
                          size="small"
                          class="green-btn mrs"
                          @click="methods.supplierSend(item, 1)"
                          >发货</van-button
                        > -->

                          <van-button
                            size="small"
                            color="red"
                            v-if="item.isSend === 0 && item.isCancel === 0"
                            @click="methods.MerchantCancelOrder(item)"
                            >取消订单</van-button
                          >

                          <van-tag
                            v-if="item.isSend === 0 && item.isCancel === 1"
                            >已取消</van-tag
                          >
                        </div>
                      </div>

                      <div class="shopDetail_btn" v-if="item?.isSend === 1">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <!-- <van-button size="small" class="green-btn mrs" 
                      >发货</van-button 
                    > -->
                          <van-tag
                            v-if="item?.isReceive === 1"
                            class="mrs mts"
                            type="warning"
                            style="position: relative; top: 5px"
                            >待供应商收货</van-tag
                          >

                          <van-button
                            v-if="item?.isReceive === 0"
                            size="small"
                            class="green-btn"
                            @click="methods.goReceive(item)"
                            >收货</van-button
                          >
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <van-list
                v-model:loading="loads.loadingb"
                :finished="loads.finishedb"
                finished-text="没有更多了"
                @load="methods.onLoadb()"
              >
              </van-list>
            </van-tab>
          </van-pull-refresh>
          <!-- 进行中订单  end-->

          <!-- 已完成订单  start-->
          <van-pull-refresh
            v-model="loadx.loadingc"
            @refresh="methods.onRefreshc()"
          >
            <van-tab title="已完成" name="2">
              <div v-if="order_complete?.data.length === 0">
                <van-empty description="暂无数据" />
              </div>
              <div
                class="finishOrders"
                v-if="order_complete?.data.length !== 0"
              >
                <div
                  class="finishOrder"
                  v-for="item in order_complete?.data"
                  :key="item.id"
                >
                  <!-- 父循环体开始  数量只有一个的情况下-->
                  <div v-if="item?.details.length === 1">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>

                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子 start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <img :src="d.photo" alt="" class="shop-img" />

                        <div class="shop-data">
                          <div class="weight">{{ d.name }}</div>
                          <div>{{ d.specs }}</div>
                          <div>￥ {{ d.price }}</div>
                          <div>×{{ d.number }}</div>
                          <div
                            class="iconfont icon-yiwancheng"
                            v-if="d.isSend === 1 && d.isComplete === 1"
                            style="font-size: 2.5rem !important; color: #07c160"
                          ></div>
                          <div
                            class="iconfont icon-weifahuo"
                            v-else
                            style="font-size: 2.5rem !important; color: #91d2ec"
                          ></div>
                          <div class="shop-date">
                            <div>保质期至: {{ d.expirydayDate }}</div>
                            <!-- <div  style="padding-left: 100px;">实收: ￥30 元</div> -->
                          </div>
                        </div>

                        <div class="shop-price shop-price_b">
                          <div>
                            <span class="red">￥ {{ d.money }}元</span>
                          </div>
                          <div>
                            <span class="weight red"
                              >实收: {{ d.receiveMoney }}元</span
                            >
                          </div>
                        </div>
                        <div style="text-align: end; font-size: 13px">
                          <span
                            >应收:
                            <span
                              style="text-decoration: line-through"
                              class="red weight"
                              >￥{{ item.money }}</span
                            >元，实收:
                            <span class="weight red"
                              >￥ {{ item.receiveMoney }}</span
                            >
                            元
                          </span>
                        </div>
                      </div>
                      <!-- 子 end -->

                      <div class="shopDetail_btn" style="height: 20px">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <div style="font-size: 10px" class="hui mtw">
                            {{ item.completeTime }}完成
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 父循环体结束  数量只有一个的情况下 -->

                  <!-- 父循环体结束  数量只有一个的情况下 -->
                  <div v-if="item?.details.length >= 2">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>
                      <!-- <p><van-tag type="warning">未发货</van-tag></p> -->
                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子循环体开始start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <!-- 1 -->
                        <div v-if="i === 0">
                          <img :src="d.photo" alt="" class="shop-img" />

                          <div class="shop-data">
                            <div class="weight">{{ d.name }}</div>
                            <div>{{ d.specs }}</div>
                            <div>￥ {{ d.price }}</div>
                            <div>×{{ d.number }}</div>
                            <div
                              class="iconfont icon-yiwancheng"
                              v-if="d.isSend === 1 && d.isComplete === 1"
                              style="
                                font-size: 2.5rem !important;
                                color: #07c160;
                              "
                            ></div>
                            <div
                              class="iconfont icon-weifahuo"
                              v-else
                              style="
                                font-size: 2.5rem !important;
                                color: #91d2ec;
                              "
                            ></div>
                            <div class="shop-date">
                              <div>保质期至: {{ d.expirydayDate }}</div>
                            </div>
                          </div>

                          <div class="shop-price shop-price_b">
                            <div>
                              <span class="red">￥ {{ d.money }}元</span>
                            </div>
                            <div>
                              <span class="weight red"
                                >实收: {{ d.receiveMoney }}元</span
                              >
                            </div>
                          </div>
                        </div>
                        <!-- 1 -->

                        <!-- 2 -->
                        <div v-if="i !== 0">
                          <div v-if="i >= 0 && i < 2">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div class="weight">{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>保质期至: {{ d.expirydayDate }}</div>
                                </div>
                              </div>

                              <div class="shop-price shop-price_b">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                                <div>
                                  <span class="weight red"
                                    >实收: {{ d.receiveMoney }}元</span
                                  >
                                </div>
                              </div>

                              <!-- <div style="text-align: end; font-size: 13px">
                              <span
                                >应收:
                                <span
                                  style="text-decoration: line-through"
                                  class="red weight"
                                  >￥{{ item.money }}</span
                                >元，实收:
                                <span class="weight red"
                                  >￥ {{ item.receiveMoney }}</span
                                >
                                元
                              </span>
                            </div> -->

                              <div
                                v-if="i === item.details.length - 1"
                                style="text-align: end; font-size: 13px"
                              >
                                <span
                                  >应收:
                                  <span
                                    style="text-decoration: line-through"
                                    class="red weight"
                                    >￥{{ item.money }}</span
                                  >元，实收:
                                  <span class="weight red"
                                    >￥ {{ item.receiveMoney }}</span
                                  >
                                  元
                                </span>
                              </div>
                            </div>

                            <div
                              style="text-align: center"
                              v-if="
                                item.details.length - 2 >= 0 &&
                                item?.details[2]?.display === 'none'
                              "
                            >
                              <p>
                                <span
                                  class="weight"
                                  style="font-size: 12px"
                                  @click="methods.lookMores(item, 'block')"
                                  >查看更多</span
                                >
                                <span class="hui" style="font-size: 10px"
                                  >(其余{{
                                    item.details.length - 2
                                  }}件商品)</span
                                >
                              </p>
                            </div>
                          </div>

                          <!-- 111111111111111111111111 -->

                          <div v-if="i >= 2" :style="{ display: d.display }">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div class="weight">{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>保质期至: {{ d.expirydayDate }}</div>
                                </div>
                              </div>

                              <div class="shop-price shop-price_b">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                                <div>
                                  <span class="weight red"
                                    >实收: {{ d.receiveMoney }}元</span
                                  >
                                </div>
                              </div>

                              <!-- <div style="text-align: end; font-size: 13px">
                              <span
                                >应收:
                                <span
                                  style="text-decoration: line-through"
                                  class="red weight"
                                  >￥{{ item.money }}</span
                                >元，实收:
                                <span class="weight red"
                                  >￥ {{ item.receiveMoney }}</span
                                >
                                元
                              </span>
                            </div> -->

                              <div
                                v-if="i === item.details.length - 1"
                                style="text-align: end; font-size: 13px"
                              >
                                <span
                                  >应收:
                                  <span
                                    style="text-decoration: line-through"
                                    class="red weight"
                                    >￥{{ item.money }}</span
                                  >元，实收:
                                  <span class="weight red"
                                    >￥ {{ item.receiveMoney }}</span
                                  >
                                  元
                                </span>
                              </div>
                            </div>
                          </div>

                          <div
                            v-if="
                              i === item.details.length - 1 &&
                              item.details.length > 2
                            "
                          >
                            <div
                              style="text-align: center"
                              v-if="
                                item.details.length - 2 >= 0 &&
                                item?.details[item.details.length - 1]
                                  ?.display === 'block'
                              "
                            >
                              <p>
                                <span
                                  class="weight"
                                  style="font-size: 12px"
                                  @click="methods.lookMores(item, 'none')"
                                  >收起
                                </span>
                              </p>
                            </div>
                          </div>
                        </div>

                        <!-- 2 -->
                      </div>

                      <!-- 子循环体end -->

                      <div class="shopDetail_btn" style="height: 20px">
                        <div style="font-size: 10px" class="hui mtw">
                          {{ item.time }}-下单
                        </div>

                        <div class="right-bottom">
                          <div style="font-size: 10px" class="hui mtw">
                            {{ item.completeTime }}完成
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <van-list
                v-model:loading="loads.loadingc"
                :finished="loads.finishedc"
                finished-text="没有更多了"
                @load="methods.onLoadc()"
              >
              </van-list>
            </van-tab>
          </van-pull-refresh>
          <!-- 已完成订单  end-->

          <!-- 已取消订单  start-->
          <van-pull-refresh
            v-model="loadx.loadingd"
            @refresh="methods.onRefreshd()"
          >
            <van-tab title="已取消" name="3">
              <div v-if="order_cancel?.data.length === 0">
                <van-empty description="暂无数据" />
              </div>
              <div class="finishOrders" v-if="order_cancel?.data.length !== 0">
                <div
                  class="finishOrder"
                  v-for="item in order_cancel?.data"
                  :key="item.id"
                >
                  <!-- 父循环体开始  数量只有一个的情况下-->
                  <div v-if="item?.details.length === 1">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>
                      <!-- <p><van-tag type="warning">未发货</van-tag></p> -->
                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子循环体开始start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <img :src="d.photo" alt="" class="shop-img" />

                        <div class="shop-data">
                          <div>{{ d.name }}</div>
                          <div>{{ d.specs }}</div>
                          <div>￥ {{ d.price }}</div>
                          <div>×{{ d.number }}</div>
                          <div
                            class="iconfont icon-yiquxiao"
                            style="font-size: 2.5rem !important"
                          ></div>
                          <div class="shop-date">
                            <div>
                              生产日期: {{ d.birthday }} 保质期:
                              {{ d.expiryday }}天
                            </div>
                          </div>
                        </div>

                        <div class="shop-price shop-price_b">
                          <div>
                            <span class="red">￥ {{ d.money }}元</span>
                          </div>
                        </div>
                        <div style="font-size: 12px" class="myflex mtw">
                          <div class="hui">取消时间: {{ item.cancelTime }}</div>
                          <div>
                            总计:
                            <span
                              ><span class="weight red"
                                >￥ {{ item.money }}</span
                              >
                              元
                            </span>
                          </div>
                        </div>
                      </div>

                      <!-- 子循环体end -->
                    </div>
                  </div>
                  <!-- 父循环体结束 -->

                  <!-- 父循环体开始  数量多个的情况下-->
                  <div v-if="item?.details.length >= 2">
                    <div class="orderHead">
                      <p>
                        <van-tag type="primary">供应商</van-tag>
                        {{ item.supplier }}
                      </p>
                      <!-- <p><van-tag type="warning">未发货</van-tag></p> -->
                      <p style="color: #77a9f2">{{ item.id }}</p>
                    </div>

                    <div class="divider"></div>

                    <div class="orderDetail">
                      <!-- 子循环体开始start -->
                      <div v-for="(d, i) in item?.details" :key="i">
                        <!-- 1 -->
                        <div v-if="i === 0">
                          <img :src="d.photo" alt="" class="shop-img" />

                          <div class="shop-data">
                            <div>{{ d.name }}</div>
                            <div>{{ d.specs }}</div>
                            <div>￥ {{ d.price }}</div>
                            <div>×{{ d.number }}</div>
                            <div
                              class="iconfont icon-yiquxiao"
                              style="font-size: 2.5rem !important"
                            ></div>
                            <div class="shop-date">
                              <div>
                                生产日期: {{ d.birthday }} 保质期:
                                {{ d.expiryday }}天
                              </div>
                            </div>
                          </div>

                          <div class="shop-price">
                            <div>
                              <span class="red">￥ {{ d.money }}元</span>
                            </div>
                            <!-- <div>
                    总计: <span class="weight red">￥ {{ item.money }}</span
                    >元
                  </div> -->
                          </div>
                        </div>
                        <!-- 1 -->

                        <!-- 2 -->
                        <div v-if="i !== 0">
                          <div v-if="i >= 0 && i < 2">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div>{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>
                                    生产日期: {{ d.birthday }} 保质期:
                                    {{ d.expiryday }}天
                                  </div>
                                </div>
                              </div>

                              <div class="shop-price shop-price_b">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                              </div>
                              <div
                                v-if="
                                  i === item.details.length - 1 ||
                                  item?.details[2]?.display === 'none'
                                "
                                style="font-size: 12px"
                                class="myflex mtw"
                              >
                                <div class="hui">
                                  取消时间: {{ item.cancelTime }}
                                </div>
                                <div>
                                  总计:
                                  <span
                                    ><span class="weight red"
                                      >￥ {{ item.money }}</span
                                    >
                                    元
                                  </span>
                                </div>
                              </div>
                            </div>

                            <div
                              style="text-align: center"
                              v-if="
                                item.details.length - 2 >= 0 &&
                                item?.details[2]?.display === 'none'
                              "
                            >
                              <p>
                                <span
                                  class="weight"
                                  style="font-size: 12px"
                                  @click="methods.lookMores(item, 'block')"
                                  >查看更多</span
                                >
                                <span class="hui" style="font-size: 10px"
                                  >(其余{{
                                    item.details.length - 2
                                  }}件商品)</span
                                >
                              </p>
                            </div>
                          </div>

                          <div v-if="i >= 2" :style="{ display: d.display }">
                            <div class="divider"></div>
                            <div style="position: relative">
                              <img :src="d.photo" alt="" class="shop-img" />

                              <div class="shop-data">
                                <div>{{ d.name }}</div>
                                <div>{{ d.specs }}</div>
                                <div>￥ {{ d.price }}</div>
                                <div>×{{ d.number }}</div>
                                <!-- <div class="iconfont icon-jiedan"></div> -->
                                <div class="shop-date">
                                  <div>
                                    生产日期: {{ d.birthday }} 保质期:
                                    {{ d.expiryday }}天
                                  </div>
                                </div>
                              </div>

                              <div class="shop-price shop-price_b">
                                <div>
                                  <span class="red">￥ {{ d.money }}元</span>
                                </div>
                              </div>
                              <div
                                v-if="i === item.details.length - 1"
                                style="font-size: 12px"
                                class="myflex mtw"
                              >
                                <div class="hui">
                                  取消时间: {{ item.cancelTime }}
                                </div>
                                <div>
                                  总计:
                                  <span
                                    ><span class="weight red"
                                      >￥ {{ item.money }}</span
                                    >
                                    元
                                  </span>
                                </div>
                              </div>
                            </div>

                            <div
                              v-if="
                                i === item.details.length - 1 &&
                                item.details.length > 2
                              "
                            >
                              <div
                                style="text-align: center"
                                v-if="
                                  item.details.length - 2 >= 0 &&
                                  item?.details[item.details.length - 1]
                                    ?.display === 'block'
                                "
                              >
                                <p>
                                  <span
                                    class="weight"
                                    style="font-size: 12px"
                                    @click="methods.lookMores(item, 'none')"
                                    >收起
                                  </span>
                                </p>
                              </div>
                            </div>
                          </div>
                        </div>

                        <!-- 2 -->
                      </div>

                      <!-- 子循环体end -->
                    </div>
                  </div>
                  <!-- 父循环体结束 多个情况-->
                </div>
              </div>

              <van-list
                v-model:loading="loads.loadingd"
                :finished="loads.finishedd"
                finished-text="没有更多了"
                @load="methods.onLoadd()"
              >
              </van-list>
            </van-tab>
          </van-pull-refresh>
          <!-- 已取消订单  end-->
        </van-tabs>
      </div>
    </van-skeleton>
  </div>
</template>
    <script setup>
import {
  MerchantCancelOrder,
  cancelOrder,
  getOrders,
  merchantReceive,
} from "@/api/order";
import { showLoadingToast, showToast } from "vant";
import { nextTick, onMounted, reactive, ref, watchEffect } from "vue";
import { pages, pagesb, pagesc, pagesd } from "../../dto/pagesDto";
import { loading } from "@/dto/loadingDto";
import { load } from "@/utils/load";
import { useRouter } from "vue-router";
const router = useRouter();
const order_new = ref([]);
const order_have = ref([]);
const order_complete = ref([]);
const order_cancel = ref([]);
const active = ref(0);
const data = reactive({
  name: "订单页面",
  status: 1,
  pagesa: {
    page: 1,
    limit: 10,
    total: 0,
  },
  pagesb: {
    page: 1,
    limit: 10,
    total: 0,
  },
  pagesc: {
    page: 1,
    limit: 10,
    total: 0,
  },
  pagesd: {
    page: 1,
    limit: 10,
    total: 0,
  },
});
// 触底
const loads = ref({
  loadinga: false,
  finisheda: false,
  loadingb: false,
  finishedb: false,
  loadingc: false,
  finishedc: false,
  loadingd: false,
  finishedd: false,
});

// 下拉
const loadx = ref({
  counta: 0,
  loadinga: false,
  countb: 0,
  loadingb: false,
  countc: 0,
  loadingc: false,
  countd: 0,
  loadingd: false,
});

const methods = {
  //新订单触底
  onLoada: () => {
    data.pagesa.limit += 10;
    getOrders({ ...data.pagesa, type: 1 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };

      orderInit(res.data);

      order_new.value = res.data;
      if (data.pagesa.limit >= res.data.total) {
        loads.value.finisheda = true;
      } else {
        loads.value.finisheda = false;
      }
      loads.value.loadinga = false;
    });
  },
  //进行中订单触底
  onLoadb: () => {
    data.pagesb.limit += 10;
    getOrders({ ...data.pagesb, type: 2 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };

      orderInit(res.data);

      order_have.value = res.data;
      if (data.pagesb.limit >= res.data.total) {
        loads.value.finishedb = true;
      } else {
        loads.value.finishedb = false;
      }
      loads.value.loadingb = false;
    });
  },

  //完成订单触底
  onLoadc: () => {
    data.pagesc.limit += 10;
    getOrders({ ...data.pagesc, type: 3 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };

      orderInit(res.data);

      order_complete.value = res.data;
      if (data.pagesc.limit >= res.data.total) {
        loads.value.finishedc = true;
      } else {
        loads.value.finishedc = false;
      }
      loads.value.loadingc = false;
    });
  },
  //已取消订单触底
  onLoadd: () => {
    data.pagesd.limit += 10;
    getOrders({ ...data.pagesd, type: 4 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };

      orderInit(res.data);

      order_cancel.value = res.data;
      if (data.pagesd.limit >= res.data.total) {
        loads.value.finishedd = true;
      } else {
        loads.value.finishedd = false;
      }
      loads.value.loadingd = false;
    });
  },
  //新订单下拉
  onRefresha: () => {
    data.pagesa.limit = 10;
    data.pagesa.page = 1;
    getOrders({ ...data.pagesa, type: 1 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };
      loads.value.finisheda = false;
      orderInit(res.data);
      order_new.value = res.data;
      loadx.value.loadinga = false;
    });
  },
  //进行中订单下拉
  onRefreshb: () => {
    data.pagesb.limit = 10;
    data.pagesb.page = 1;
    getOrders({ ...data.pagesb, type: 2 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };
      loads.value.finishedb = false;
      orderInit(res.data);
      order_have.value = res.data;
      loadx.value.loadingb = false;
    });
  },
  //完成订单下拉
  onRefreshc: () => {
    data.pagesc.limit = 10;
    data.pagesc.page = 1;
    getOrders({ ...data.pagesc, type: 3 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };
      loads.value.finishedc = false;
      orderInit(res.data);
      order_complete.value = res.data;
      loadx.value.loadingc = false;
    });
  },
  //已取消下拉
  onRefreshd: () => {
    data.pagesd.limit = 10;
    data.pagesd.page = 1;
    getOrders({ ...data.pagesd, type: 4 }).then((res) => {
      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };
      loads.value.finishedd = false;
      orderInit(res.data);
      order_cancel.value = res.data;
      loadx.value.loadingd = false;
    });
  },
  /**
   * 第一个参数 要改变的数组 第二个参数 是否显示
   * 第三个参数 要改变的对象的父对象
   */
  changes: (order_new, display, item) => {
    if (display == "block") {
      const arr = order_new.value.data.map((d) => {
        if (d.id === item.id) {
          d.details.map((d) => {
            d.display = "block";
          });
          return d;
        } else {
          return d;
        }
      });
      order_new.value.data = arr;
    } else {
      const arr = order_new.value.data.map((d) => {
        if (d.id === item.id) {
          d.details.map((e, i) => {
            if (i > 1) {
              e.display = "none";
            }
          });
          return d;
        } else {
          return d;
        }
      });
      order_new.value.data = arr;
    }
  },
  lookMores: (item, display) => {
    console.log(active.value);
    if (active.value == 0) {
      methods.changes(order_new, display, item);
    }

    if (active.value == 1) {
      methods.changes(order_have, display, item);
    }

    if (active.value == 2) {
      methods.changes(order_complete, display, item);
    }

    if (active.value == 3) {
      methods.changes(order_cancel, display, item);
    }
  },
  /**
   * 供应商-订单确认收货
   */
  merchantReceive: async (item, num) => {
    load();
    const res = await merchantReceive({ id: item.id, isSend: num });
    const resb = await getOrders({ ...pagesb, type: 2 });
    if (res?.result === 0) {
      showToast("操作成功");
      order_have.value = resb.data;
    } else {
      showToast("操作失败");
    }
  },
  //去确认收货页面
  goReceive: (item) => {
    router.push("shop/order/collect/" + item.id);
  },
  /**
   * 取消接单/取消订单 //直接变成已取消订单
   */
  MerchantCancelOrder: async (item) => {
    load();

    const res = await MerchantCancelOrder({ id: item.id });

    //新订单
    if (active.value == 0) {
      if (res?.result === 0) {
        console.log(order_new.value);
        //取消订单 start
        const arr = order_new.value.data.map((d, i) => {
          if (item.id === d.id) {
            return { ...d, isCancel: 1, isAccept: 0 };
          } else {
            return d;
          }
        });
        order_new.value.data = arr;
        //取消订单 end
      } else {
        showToast("操作失败");
      }
    }

    if (active.value == 1) {
      if (res?.result === 0) {
        //取消订单 start
        const arr = order_have.value.data.map((d, i) => {
          if (item.id === d.id) {
            return { ...d, isCancel: 1, isAccept: 0 };
          } else {
            return d;
          }
        });
        order_have.value.data = arr;
        //取消订单 end
      } else {
        showToast("操作失败");
      }
    }
  },
  onClickTab: () => {
    console.log(active.value, "llllllllll");
  },

  /**
   * 获取订单
   */
  getOrders: () => {
    Promise.allSettled([
      getOrders({ ...data.pagesa, type: 1 }),
      getOrders({ ...data.pagesb, type: 2 }),
      getOrders({ ...data.pagesc, type: 3 }),
      getOrders({ ...data.pagesd, type: 4 }),
    ]).then((res) => {
      //判断所有执行结果是否成功
      res.some((item) => {
        if (item.status === "fulfilled") {
          if (item.value?.result !== 0) {
            showToast("数据异常,如发现异常请联系管理员处理");
          }
        }
      });
      //判断接口是否全部执行成功
      res.some(
        (item) =>
          item.status !== "fulfilled" &&
          showToast("数据异常,如发现异常请联系管理员处理")
      );
      loading.isFirst = false;

      const orderInit = (obj) => {
        obj.data.map((d) => {
          d.details.map((e, i) => {
            if (i >= 2) {
              return (e.display = "none");
            } else {
              return (e.display = "block");
            }
          });
        });
      };

      orderInit(res[0].value.data);
      orderInit(res[1].value.data);
      orderInit(res[2].value.data);
      orderInit(res[3].value.data);

      order_new.value = res[0].value.data;
      if (data.pagesa.limit >= res[0].value.data.total) {
        loads.value.finisheda = true;
      } else {
        loads.value.finisheda = false;
      }

      order_have.value = res[1].value.data;
      if (data.pagesb.limit >= res[1].value.data.total) {
        loads.value.finishedb = true;
      } else {
        loads.value.finishedb = false;
      }

      order_complete.value = res[2].value.data;
      if (data.pagesc.limit >= res[2].value.data.total) {
        loads.value.finishedc = true;
      } else {
        loads.value.finishedc = false;
      }

      order_cancel.value = res[3].value.data;
      if (data.pagesd.limit >= res[3].value.data.total) {
        loads.value.finishedd = true;
      } else {
        loads.value.finishedd = false;
      }
    });
  },
};

onMounted(() => {
  methods.getOrders();
  loading.isFirst = true;
});
// watchEffect(() => {
//   // methods.getOrders();
//   getOrders({...data.pagesa}).then((res)=>{
//     console.log(res,";;;;;;;;;;;");
//   })
//   // order_new.details;

// });
</script>


<style scoped>
.iconfont {
  font-size: 30px !important;
  position: absolute;
  right: -30%;
}
.right-bottom {
  position: absolute;
  right: 0;
  bottom: 0px;
}
.shopDetail_btn {
  /* position: absolute; */
  margin-top: 10px;
  bottom: 0;
  border-top: 1px solid #ebedf0;
  height: 40px;
  width: 100%;
}
.shop-price {
  width: 200px;
  /* border: 1px solid #000; */
  height: 60px;
  flex: 1;
  /* position: relative; */
  position: absolute;
  top: 5px;
  right: 0;
  font-size: 13px;
}

.shop-price_b {
  height: 48px;
}

.shop-price > :nth-child(1) {
  position: absolute;
  right: 0;
}

.shop-price > :nth-child(2) {
  position: absolute;
  bottom: 0;
  right: 0;
}

.shop-date {
  position: absolute;
  margin-top: 30px;
  color: #b2b2b2;
  font-size: 12px;
  min-width: 190px;
  /* border: 1px solid #000; */
}
.shop-data {
  /* border: 1px solid #000; */
  position: absolute;
  top: 0px;
  left: 50px;
  margin-top: 5px;
  height: 70px;
  display: flex;
  width: 54%;
  font-size: 12px;
  margin-left: 6px;
  justify-content: space-between;
}
.VOrderContainer {
  padding: 5px;
}
.sendGood-btn {
  min-width: 56px;
  margin-top: 15px;
  max-height: 26px;
}
.VOrderIndex {
  padding: 5px;
}
.finishOrders {
  width: 100%;
  position: relative;
  right: 5px;
  margin-top: 10px;
}
.finishOrder {
  width: 100%;
  border: 1px solid #eee;
  /* height: 150px; */
  border-radius: 10px;
  padding: 5px;
  padding-bottom: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.finishOrder:not(:first-child) {
  margin-top: 5px;
}

.orderHead {
  display: flex;
  justify-content: space-between;
}

.orderHead > p {
  margin: 3px;
  font-weight: bold;
}

.orderHead > p:nth-child(1) {
  font-size: 14px;
}

.orderHead > p:nth-child(2) {
  color: #c2bcbc;
  font-weight: 500;
  font-size: 12px;
}

.divider {
  margin-top: 5px;
  border-top: 1px solid #eee;
}

.orderDetail {
  height: 80%;
  width: 100%;
  /* border: 1px solid red; */
  /* display: flex; */
  position: relative;
}

.shop-img-box {
  width: 100px;
  margin-top: 3px;
  margin-left: 5px;
}

.shop-img {
  margin-top: 5px;
  width: 50px;
  height: 50px;
  border-radius: 6px;
}

/* Tabs样式修改 */
.adm-tabs-content {
  padding: 5px;
}

.adm-tabs-tab {
  white-space: nowrap;
  padding: 8px 0 12px;
  width: min-content;
  margin: 0 auto;
  font-size: var(--title-font-size);
  position: relative;
  cursor: pointer;
}

.adm-tabs-header {
  border-bottom: none;
}
</style>